<template>
  <div class="box-padding">
    <div style="height: 35px;width: 90%">
      <Button type="primary"
              @click="addRoleClick('add')"
              v-show="control.add">新增</Button>
    </div>

    <Tabs :value="value"
          @on-click="tabClick">
      <TabPane label="通用职务"
               name="POST_TYPE_1">
        <Table border
               :columns="columns1"
               :data="data1"></Table>
      </TabPane>
      <TabPane label="专用职务"
               name="POST_TYPE_2">
        <Table border
               :columns="columns1"
               :data="data1"></Table>
      </TabPane>
    </Tabs>

    <Modal v-model="modal2"
           width="360">
      <p slot="header"
         style="color:#333; text-align:center; border-bottom:none !important;">
        <span>删除提醒</span>
      </p>
      <div style="text-align:center;border:none !important;">
        确认要删除此项内容吗？
      </div>
      <div slot="footer"
           style="text-align:center;border:none !important;">
        <Button shape="circle"
                @click="modal2 = !modal2">取消</Button>
        <Button shape="circle"
                type="error"
                @click="removeClick">删除</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { getUserInLocalstorage, getButtonInLocalstorage } from '@/libs/util'
export default {
  name: 'job-management',
  data() {
    return {
      modal2: false,
      value: 'POST_TYPE_1',
      columns1: [
        {
          title: '序号',
          align: 'center',
          render: (h, params) => {
            return h('span', params.index + 1)
          }
        },
        {
          title: '职务名称',
          align: 'center',
          key: 'name'
        },
        {
          title: '适应范围',
          align: 'center',
          key: 'scopeName'
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              this.control.edit &&
              (this.isRooter || this.parmes.type == 'POST_TYPE_2')
                ? h(
                    'Button',
                    {
                      props: {
                        type: 'text',
                        size: 'small',
                        ghost: true
                      },
                      style: {
                        marginRight: '5px',
                        color: '#2d8cf0'
                      },
                      on: {
                        click: () => {
                          this.addRoleClick('edit', params.index)
                        }
                      }
                    },
                    '编辑'
                  )
                : '',
              this.control.detail
                ? h(
                    'Button',
                    {
                      props: {
                        type: 'text',
                        size: 'small',
                        ghost: true
                      },
                      style: {
                        marginRight: '5px',
                        color: '#2d8cf0'
                      },
                      on: {
                        click: () => {
                          this.addRoleClick('details', params.index)
                        }
                      }
                    },
                    '详情'
                  )
                : '',
              this.control.delete &&
              (this.isRooter || this.parmes.type == 'POST_TYPE_2')
                ? h(
                    'Button',
                    {
                      props: {
                        type: 'text',
                        size: 'small',
                        ghost: true
                      },
                      style: {
                        color: '#2d8cf0'
                      },
                      on: {
                        click: () => {
                          this.removeBox(params.index)
                        }
                      }
                    },
                    '删除'
                  )
                : ''
            ])
          }
        }
      ],
      data1: [],
      parmes: {
        type: 'POST_TYPE_1'
      },
      total: 0,
      deleteIndex: '',
      userInfo: {},
      deleteItem: {},
      control: {},
      isRooter: false,
      arr: []
    }
  },
  mounted() {
    this.dictTypeCode()
    this.userInfo = getUserInLocalstorage()
    if (this.userInfo.userInOrgType == 'ROOT_ENTERPRISE_USER') {
      //为集团身份时
      this.isRooter = true
    } else {
      this.isRooter = false
    }
    this.buttonShow()
  },
  activated() {
    this.roleList(this.arr)
  },
  methods: {
    // 切换
    tabClick(value) {
      this.parmes.type = value
      this.dictTypeCode()
    },
    // 职务列表
    roleList(arr) {
      this.$api.positionManagement.roleList(this.parmes).then(resp => {
        if (resp.code == 200) {
          resp.data.forEach(e => {
            arr.forEach(a => {
              if (e.scope == a.code) {
                this.$set(e, 'scopeName', a.name)
              }
            })
          })
          this.data1 = resp.data
        }
      })
    },
    // 适用范围
    dictTypeCode() {
      this.$api.positionManagement
        .dictTypeCode('RANGE_APPLICATION')
        .then(resp => {
          if (resp.code == 200) {
            this.arr = []
            this.arr = resp.data
            this.roleList(this.arr)
          }
        })
    },
    // 新增/编辑/详情
    addRoleClick(type, index) {
      const id = parseInt(Math.random() * 100000)
      const route = {
        name:
          type == 'add'
            ? 'job-management-add'
            : type == 'edit'
            ? 'job-management-edit'
            : 'job-management-detail',
        params: {
          type: type,
          id: type == 'add' ? id : this.data1[index].id,
          name:
            type == 'add'
              ? '职务新增'
              : type == 'edit'
              ? '职务编辑'
              : '职务详情',
          user: this.userInfo.userInOrgType
        }
      }
      this.$router.push(route)
    },
    // 删除
    removeBox(index) {
      this.modal2 = !this.modal2
      this.deleteIndex = index
    },
    removeClick() {
      this.$api.positionManagement
        .roleDetail(this.data1[this.deleteIndex].id)
        .then(resp => {
          if (resp.code == 200) {
            let params = resp.data
            this.$api.positionManagement.deleteRole(params).then(resp => {
              if (resp.code == 200) {
                this.$Message.success('删除成功')
                // this.data1.splice(this.deleteIndex, 1)
                this.modal2 = !this.modal2
                this.dictTypeCode()
              } else {
                this.$Message.warning(resp.message)
                this.modal2 = !this.modal2
              }
            })
          }
        })
        .catch(err => {
          this.$Message.warning(resp.message)
        })
    },
    //按钮权限
    buttonShow() {
      let buttonList = JSON.parse(localStorage.getItem('buttonList'))
      buttonList.map(val => {
        let key = Object.keys(val).toString()
        if (key === this.$route.name) {
          Object.values(val)[0].map(item => {
            if (item.code == 'P_0502_01') {
              this.control.add = true
            } else if (item.code == 'P_0502_02') {
              this.control.edit = true
            } else if (item.code == 'P_0502_03') {
              this.control.delete = true
            } else if (item.code == 'P_0502_04') {
              this.control.detail = true
            }
          })
        }
      })
    }
  }
}
</script>

<style scope>
.page-div {
  padding-top: 20px;
  width: 100%;
  text-align: center;
}
</style>
